<template>
  <div class="container">
    <div class="question">
    <div class="item" v-if="!allQuestionsAnswered" v-for="(question, questionIndex) in questions" :key="questionIndex">
      <h3>{{ question.question }}</h3>
      <div v-for="(option, optionIndex) in question.options" :key="optionIndex">
        <div :class="{ 'correct-option': isCorrect(questionIndex, optionIndex), 'wrong-option': isWrong(questionIndex, optionIndex) }">
  <button
    v-if="question.selectedOptionIndex === null"
    :disabled="question.selectedOptionIndex !== null"
    @click="checkAnswer(questionIndex, optionIndex)"
  >
    {{ option }}
  </button>
  <button v-else disabled>{{ option }}</button>
</div>
      </div>
    </div>
    </div>
     <div class="score" v-if="allQuestionsAnswered">总分：{{totalScore}}</div>
    <img class="answer" src="@/static/answer.jpg" alt="answer">
  </div>
</template>

<script>
export default {
  data() {
    return {
      questions: [
        {
          question: "你对中草药的概念理解是？",
          options: ["天然生长的中草药", "在中国生长的中草药", "民间采集的中草药", "在中草药理论指导下的草药"],
          correctAnswerIndex: 0,
          selectedOptionIndex: null,
          score:10
        },
        {
          question: "中草药常用于？",
          options: ["美容护肤", "烹饪", "药物治疗", "娱乐活动"],
          correctAnswerIndex: 2,
          selectedOptionIndex: null,
          score:10
        },
         {
             question: "中草药的使用历史可以追溯到哪个古代文明？",
          options: ["古希腊", "古印度", "古埃及", "古中国"],
          correctAnswerIndex: 3,
          selectedOptionIndex: null,
          score:10
          },
           {
          question: "中草药是否可以用于药物治疗？",
          options: ["是", "否", "部分情况下", "取决于剂量"],
          correctAnswerIndex: 0,
          selectedOptionIndex: null,
          score:10
        }, 
        {
          question: "什么部分的植物通常被用作中草药？", 
          options: ["叶子", "树皮", "根部", "全草"],
          correctAnswerIndex: 3,
          selectedOptionIndex: null,
          score:10
        },
          {
          question:"中草药的制剂形式包括什么？", 
          options: ["草药茶", "草药浸剂", "草药胶囊", "所有选项都正确"],
          correctAnswerIndex: 3,
          selectedOptionIndex: null,
          score:10
        },
     {
          question:"中草药是否需要处方才能使用？", 
          options: ["是，始终需要处方", "否，可以自由购买", "取决于草药的类型", "只在医院需要处方"],
          correctAnswerIndex: 2,
          selectedOptionIndex: null,
          score:10
        },
       {
          question:"中草药研究的学科领域是？", 
          options: ["药学", "植物学", "中医药学", "化学"],
          correctAnswerIndex: 1,
          selectedOptionIndex: null,
          score:10
        },
        {
          question:"在中草药制备中，何种过程通常被称为煎煮？", 
          options: ["搅拌药材", "浸泡药材", "加热药材", "切碎药材"],
          correctAnswerIndex: 2,
          selectedOptionIndex: null,
          score:10
        },        
         {
          question:"中草药是否具有副作用？", 
          options: ["是，有副作用", "否，无副作用", "只在高剂量下有副作用", "只在儿童使用时有副作用"],
          correctAnswerIndex: 0,
          selectedOptionIndex: null,
          score:10
        }
      ]
    };
  },
   computed: {
    allQuestionsAnswered() {
      // 检查是否所有题目都已经回答
      return this.questions.every(question => question.selectedOptionIndex !== null);
    },
    totalScore() {
      // 计算总分
      return this.questions.reduce((total, question) => {
        if (question.selectedOptionIndex === question.correctAnswerIndex) {
          return total + question.score;
        } else {
          return total;
        }
      }, 0);
    }
  },
 methods: {
    checkAnswer(questionIndex, optionIndex) {
      // 只有当未选择时才更新选择
      if (this.questions[questionIndex].selectedOptionIndex === null) {
        this.questions[questionIndex].selectedOptionIndex = optionIndex;
      }
    },
    isCorrect(questionIndex, optionIndex) {
      return this.questions[questionIndex].selectedOptionIndex === this.questions[questionIndex].correctAnswerIndex && this.questions[questionIndex].selectedOptionIndex === optionIndex;
    },
    isWrong(questionIndex, optionIndex) {
      return this.questions[questionIndex].selectedOptionIndex !== this.questions[questionIndex].correctAnswerIndex && this.questions[questionIndex].selectedOptionIndex === optionIndex;
    }
  }
};
</script>

<style scoped>
.container{
    display: flex;
    position: relative;
    height: 100vh;
}
.question{
    position: absolute;
    overflow-y: auto;
    width: 40%;
    left: 30%;
    top: 20%;
    bottom: 20%;
    font-size: 20px;
    color: rgb(68, 68, 69);
}
.answer{
    height: 100%;
    width: 100%;
}
button{
  background-color: transparent; /* 背景色透明 */
  border-radius: 10px;
  line-height: 20px; /* 文本垂直居中 */
}
.correct-option button{
  background-color: green;
}

.wrong-option button {
  background-color: red;
}
.score{
    position: absolute;
    z-index: 1;
    left: 26%;
    font-size: 60px;
    bottom: 45%;
    width:100%;
}
</style>